<template>
    <div class="str_step flexbox flexcenter">
        <UserList ref="user_ref" @getAdverData="getAdverData" />
        <RulesModel ref="rules_ref" @getRulesData="getRulesData" :viewForm="viewForm" />
        <AddRange ref="range_ref" :viewForm="viewForm" @getRangeData="getRangeData" />
        <div class="step_box">
            <div class="step_header flexbox flexbetween flexcenter">
                <span class="step_num">1</span>
                <span class="step_status gray" v-if="!viewForm.is_adver">待设置</span>
                <span class="step_status green" v-else>已完成</span>
            </div>
            <div class="step_content">
                <p class="step_text">添加【广告账户】</p>
                <p class="step_tips">「自动投放操作」将应用到已选择广告账户上</p>
                <el-button type="primary" plain size="mini" class="step_btn" v-if="!viewForm.is_adver" @click="addAdverList">去添加</el-button>
                <el-button type="primary" plain size="mini" class="step_btn" v-else @click="addAdverList">修改</el-button>
            </div>
        </div>
        <svg class="step_icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="14.6663" cy="14.5" r="10.2" stroke="#616C85" stroke-width="2" />
            <path d="M14.6665 10.2998L14.6665 18.6998" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M10.4663 14.5L18.8663 14.5" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <div class="step_box">
            <div class="step_header flexbox flexbetween flexcenter">
                <span class="step_num">2</span>
                <span class="step_status gray" v-if="!viewForm.type">待设置</span>
                <span class="step_status green" v-else>已完成</span>
            </div>
            <div class="step_content">
                <p class="step_text">设置【适用范围】</p>
                <p class="step_tips">选择适当的范围，确保操作准确应用</p>
                <el-button type="primary" plain size="mini" class="step_btn" v-if="!viewForm.type" @click="addRange">去添加</el-button>
                <el-button type="primary" plain size="mini" class="step_btn" v-else @click="addRange">修改</el-button>
            </div>
        </div>
        <svg class="step_icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="14.6663" cy="14.5" r="10.2" stroke="#616C85" stroke-width="2" />
            <path d="M14.6665 10.2998L14.6665 18.6998" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M10.4663 14.5L18.8663 14.5" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <div class="step_box">
            <div class="step_header flexbox flexbetween flexcenter">
                <span class="step_num">3</span>
                <span class="step_status gray" v-if="!viewForm.is_rules">待设置</span>
                <span class="step_status green" v-else>已完成</span>
            </div>
            <div class="step_content">
                <p class="step_text">添加【触发规则】</p>
                <p class="step_tips">满足条件将执行账户关停操作</p>
                <el-button type="primary" plain size="mini" class="step_btn" v-if="!viewForm.is_rules" @click="addRulesList">去添加</el-button>
                <el-button type="primary" plain size="mini" class="step_btn" v-else @click="addRulesList">修改</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import UserList from "./UserList";
import RulesModel from "./RulesModel";
import AddRange from "./AddRange";
export default {
    props: ["viewForm"],
    components: {
        UserList,
        RulesModel,
        AddRange,
    },
    name: "",
    data() {
        return {
            loading: false,
        };
    },
    created() {
        
    },
    beforeDestroy() {
        
    },
    methods: {
        // 添加广告账号
        addAdverList() {
            this.$refs.user_ref.dialogVisible = true;
            this.$refs.user_ref.tableData = this.viewForm.adverData;
        },
        getAdverData(data) {
            this.viewForm.adverData = data;
            if (this.viewForm.adverData.length > 0) {
                this.viewForm.is_adver = true;
            } else {
                this.viewForm.is_adver = false;
            }
            this.setSessionStorage();
        },

        // 添加适用范围
        addRange(){
            this.$refs.range_ref.getData()
        },
        getRangeData(data){
            this.viewForm.type = data
            this.setSessionStorage();
        },

        // 添加规则组
        addRulesList() {
            this.$refs.rules_ref.dialogVisible = true;
            let operation = [
                {
                    cost: "",
                    roi: "",
                },
            ];
            this.$refs.rules_ref.addRuleGroupForm.operation =
                this.viewForm.rulesDta.length > 0
                    ? this.viewForm.rulesDta
                    : operation;
            this.$refs.rules_ref.type = 1;
        },
        getRulesData(data) {
            this.viewForm.rulesDta = data.operation;
            if (this.viewForm.rulesDta.length > 0) {
                this.viewForm.is_rules = true;
            }
            this.setSessionStorage();
        },
        setSessionStorage() {
            this.$emit("setSessionStorage")
        },
    },
};
</script>


<style scoped>
.step_box {
    width: 340px;
    height: 180px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 0 24px;
}
.step_header {
    height: 56px;
    border-bottom: 1px solid #ebebeb;
}
.step_num {
    font-size: 16px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #ebebeb;
    background: rgba(165, 177, 209, 0.08);
    font-family: "DINPro";
    color: #616c85;
}
.step_status {
    width: 52px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    border-radius: 2px;
}
.step_status.gray {
    background: rgba(165, 177, 209, 0.08);
    color: #616c85;
}
.step_status.green {
    background: rgba(0, 194, 113, 0.05);
    color: #00c271;
}
.step_content {
    text-align: center;
    margin-top: 16px;
}
.step_text {
    font-size: 16px;
    color: #17233d;
    font-weight: bold;
}
.step_tips {
    font-size: 14px;
    color: #b4b7bd;
    margin-top: 4px;
}
.step_btn {
    border: 0;
    background: rgba(165, 177, 209, 0.08);
    margin-top: 16px;
    width: 120px;
}

.step_icon {
    margin: 0 15px;
}
.str_input {
    margin-top: 16px;
    text-align: center;
}
.str_button {
    width: 340px;
    margin-left: 0;
    margin-top: 16px;
}
</style>

<style>
.str_input .el-input__inner {
    text-align: center;
}
.step_btn.el-button--primary.is-plain:focus,
.step_btn.el-button--primary.is-plain:hover {
    color: #4475ff;
    background: rgba(165, 177, 209, 0.2);
}
</style>


